<template>
	<div class="mt-10">
		<div class="flex items-center gap-1">
			<base-icon
				:name="type === 'reward' ? 'protocol' : 'event'"
				class="text-[26px]"
				color="#7864ff" />
			<p class="text-lg text-t-1">
				{{ $t(type === 'reward' ? 'rewards.bonusTitle.illustrate' : 'star.benefits.illustrate') }}
			</p>
		</div>
		<div class="mt-5 grid grid-cols-1 sm:grid-cols-2 gap-4 w-full">
			<div
				v-for="item in list"
				:key="item.title"
				class="h-24 pl-[20px] rounded bg-bg-3 flex items-center cursor-pointer"
				style="background: #1b2538">
				<div v-if="type === 'reward'">
					<base-image
						style="width: 65px; height: 65px"
						:src="'activity/reward/' + item.img"></base-image>
				</div>
				<div
					v-else
					style="min-width: 60px; width: 60px; height: 60px"
					class="circle flex items-center justify-center">
					<base-image :src="'activity/reward/' + item.img"></base-image>
				</div>
				<div class="ml-5">
					<div style="color: white">{{ $t(item.title) }}</div>
					<div style="font-size: 12px; padding-right: 4px">{{ $t(item.content) }}</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
import { BaseIcon, BaseImage } from '@/components/base/index.js'

defineProps({
	type: String as any,
	list: Array as any
})
</script>
<style scoped>
.circle {
	width: 100px;
	/* 设置宽度 */
	height: 100px;
	/* 设置高度，保证宽高相等 */
	border-radius: 50%;
	/* 设置圆角为 50%，使其变成圆形 */
	border: 2px solid #96a5aa26;
	/* 可选：添加边框 */
}
</style>
